<template>
   <nav-bar>
        <div slot="left" class="back" @click="backClick">
            <img src="~assets/img/common/back.svg" alt="">
        </div>
        <div slot="center" class="title">
            <div v-for="(item, index) in titles" :class="{active: currentIndex === index}"
             @click="itemClick(index)" class="title-item" :key="item">{{item}}</div>
        </div>
    </nav-bar>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'

export default {
    components: {
        NavBar,
    },
    data() {
        return{
            titles: ['商品', '参数', '评论', '推荐'],
            currentIndex: 0
        }
    },
    methods: {
        itemClick(index) {
            this.currentIndex = index
            this.$emit('tabClick', index)
        },
        backClick() {
            this.$router.back()
        }
    }
}
</script>

<style>
    .title{
        display: flex;
        
    }

    .title .active{
        color: var(--color-tint);
    }

    .title-item{
        flex: 1;
    }

    .back img{
        vertical-align: middle;
    }
</style>